<template>
  <div v-if="!Weixin_">
    <div :class="{ 'home-header': show_, 'home-header-fixed': show }" :style="{ paddingTop: Height + 'px' }">
      <div class="header_biaoti">
        <div class="back_" @click="backAciton">
          <img v-if="image_ == '0'" src="../public/img/other/fanhui_hei.png" alt="" />
          <img class="back_trfom" v-else src="../public/img2/level_new/wealth_back_icon@2x.png" alt="" />
        </div>
        <div class="title">
          <slot>{{ title }}</slot>
        </div>
        <div class="tishi">
          <slot name="tishi"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 import wx from 'weixin-js-sdk'
  import {
    Toast
  } from "vant";
  export default {
    props: {
      image_: "", //0黑1白
      title: "",
      show: {
        type: Boolean,
        default: false,
      }, //头部fixed定位判断，动态绑定 class= " home-header-fixed "
      scrollTop: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        Height: "",
        show_: true,
        Weixin_: false,
      };
    },
    created() {
      var ua = navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.Weixin_ = true
      } else {
        this.Weixin_ = false
      }
      let that = this;
      var u = navigator.userAgent;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
      if (isiOS) {
        if (window.webkit) {
          //Vue的方法给原生调用，则需要把方法挂在Window下面
          window.sendStatusBarHeight = this.sendStatusBarHeight;
          window.webkit.messageHandlers.getStatusBarHeight.postMessage({});
          window.webkit.messageHandlers.setStatusBarTheme.postMessage({
            setStatusBarTheme: 0,
          });
        }
      } else {
        that.Height = app.getStatusBarHeight() / window.devicePixelRatio;
        this.$emit("getHeight", 48 + that.Height);
        app.setStatusBarTheme(0);
      }
    },
    mounted() {
      // 监听页面滚动事件
      window.addEventListener("scroll", this.showSearch);
    },

    methods: {
      sendStatusBarHeight(Height) {
        this.Height = Height;
        this.$emit("getHeight", 48 + Height);
      },
  
      backAciton() {
        var ua = navigator.userAgent.toLowerCase(); //微信小程序 
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          wx.miniProgram.navigateBack({
            delta: 1
          })
        } else {
            if (window.isiOS) {
              console.log("iOS返回事件");
              window.webkit.messageHandlers.backAction.postMessage({});
            } else {
              console.log("安卓返回事件");
              app.backAction();
            }
        }
      },
      //头部fixed定位
      showSearch() {
        let scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        if (this.scrollTop) {
          if (scrollTop > 150) {
            // 当页面滚动到高度300px处，动态绑定class 来设置头部固定定位
            this.$emit("show", true);
          } else {
            this.$emit("show", false);
          }
        }
      },
    },
  };
</script>

<style lang="less" scoped>
  .pxToVW (@px, @attr: width) {
    @vw: (unit(round((@px / 4.14) * 100)) / 100);
    @{attr}:~"@{vw}vw";
  }

  .home-header {
    height: 0;
    position: absolute;
  }

  .home-header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    transition: all 500ms;
    height: 48px;
    display: flex;
    align-items: center;

    .home-picture,
    .home-hot {
      display: none;
    }
  }

  .header_biaoti {
    width: 100vw;
    height: 48px;
    display: flex;
    align-items: flex-end;
    position: relative;
    justify-content: center;

    .back_ {
      width: 10vw;
      height: 100%;
      display: flex;
      align-items: center;
      position: absolute;
      .pxToVW(20, left);

      img {
        width: 2.2vw;
      }
    }

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 48px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 400;
    }

    .tishi {
      position: absolute;
      .pxToVW(20, right);
      height: 100%;
      .pxToVW(20);
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
</style>